<template>
  <!--  归档页面 -->
  <div class="main">
    <div class="main_box">
      <!-- 左 -->
      <div class="left">
        <div class="left-main-box">
          <!-- 大标题 -->
          <h2>幼稚园</h2>
          <!-- 友链列表 title -->
          <h5>
            <i class="iconfont" style="color: #14a9eb">&#xe608;</i
            >&nbsp;友链列表
            <span class="count">16 条</span>
          </h5>
          <!-- 友链内容盒子 大盒子 -->
          <div class="child-chain-box">
            <ul class="chain-ul">
              <li class="chain-li" v-for="item in childList" :key="item.id">
                <a
                  :href="item.url"
                  class="chain"
                  :style="
                    'background-color:' +
                    childColor[Math.floor(Math.random() * (10 - 0 + 1)) + 0]
                  "
                >
                  <span class="chain-name">{{ item.nickName }}</span>
                  <div class="chain-txt-icon">
                    <div class="chain-txt">{{ item.briefIntroduction }}</div>
                    <div class="chain-icon">
                      <img :src="item.logo" alt="" />
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <!-- 底部 -->
          <div class="left-foot">
            <h5>
              <i class="iconfont" style="color: #14a9eb">&#xe608;</i
              >&nbsp;申请格式
            </h5>
            <!-- 申请流程 -->
            <div class="application-method">
              <span class="application-icon iconfont">&#xe611;</span>
              <ul class="method-ul">
                <li class="method-li">
                  博客名称 + 博客地址 + 博客Logo + 博客简介
                </li>
                <li class="method-li">- 博客地址/logo</li>
                <li class="method-li">- 博客地址/avatar</li>
                <li class="method-li">(大家在留言栏目里留言即可)</li>
              </ul>
            </div>
            <!-- 申请案例 -->
            <div class="application-case">
              <ul class="case-ul">
                <li class="case-li">
                  博客名称：<span class="case-name">博客名称：追尾巴的猫</span>
                </li>
                <li class="case-li">
                  博客地址：<a href="https://www.lwjppz.cn"
                    >https://www.lwjppz.cn</a
                  >
                </li>
                <li class="case-li">
                  博客Logo：<a href="https://www.lwjppz.cn/logo"
                    >https://www.lwjppz.cn/logo</a
                  >
                </li>
                <li class="case-li">
                  博客简介：<span class="case-name"
                    >山有木兮木有枝，心悦君兮君不知</span
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="register">
        <MyInfo></MyInfo>
        <Notice></Notice>
        <Mydate></Mydate>
        <NewReply></NewReply>
        <Tags></Tags>
      </div>
    </div>
  </div>
</template>

<script>
  //  友链 接口
  import { postChildAll } from '../../api/child.js';
  // 右
  import MyInfo from '@/components/register/MyInfo.vue';
  import Notice from '@/components/register/Notice.vue';
  import Mydate from '@/components/register/Mydate.vue';
  import NewReply from '@/components/register/NewReply.vue';
  import Tags from '@/components/register/Tags.vue';
  // 接口

  // 导入时间库
  export default {
    name: 'Child',
    data() {
      return {
        childList: '', //存储所有友链信息
        childColor: [
          '#5961F9',
          '#F55555',
          '#32CCBC',
          '#FA742B',
          '#32B76E',
          '#D939CD',
          '#4FACFE',
          '#FF9A9E',
          'pink',
          '#BB4E75',
        ],
      };
    },
    components: {
      MyInfo,
      Notice,
      Mydate,
      NewReply,
      Tags,
    },
    methods: {
      async getChildAll() {
        const { data: res } = await postChildAll();
        this.childList = res.data;
        console.log(res.data);
      },
    },
    created() {
      this.getChildAll();
    },
  };
</script>

<style lang="less" scoped>
  @import url('../../state/mainPublic.less');
  @import url('../../state/css/barList/child.less');
</style>
